<template>
    <div>
        <span style="font-size: 30px; font-weight: 20px">PersonMap：</span
        ><input
            type="text"
            v-model="name"
            @keyup.enter="handAdd"
            placeholder="输入骚话后回车"
        />
        <ul>
            <li v-for="person in personList" :key="person.id">
                <div>{{ person.name }}</div>
                <div>{{ person.id }}</div>
                <hr />
            </li>
        </ul>
        <div class="foot">
            <span> 总数：{{ nol }} </span>
            <button @click="addPerson">点我随机添加</button>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
    name: "PersonMap",
    data() {
        return {
            name: "",
        };
    },
    methods: {
        ...mapMutations("personOption", ["ADD_PERSON"]),
        ...mapActions("personOption", ["addPerson"]),
        handAdd() {
            this.ADD_PERSON(this.name);
            this.name = "";
        },
    },
    computed: {
        ...mapState("personOption", ["personList"]),
        ...mapGetters("personOption", ["nol"]),
    },
};
</script>

<style>
.foot {
    float: right;
}
</style>
